<template>
     <div class="table_filter">
      
          <el-input
          v-model="input"
            size="small"
            :placeholder="placeholder"
            style="width: 200px; margin: 0 10px"
          />
          <el-select
            v-model="value"
            class="m-2"
            size="small"
            style="margin-right: 20px"
            :placeholder="selectPlaceholder"
          >
            <el-option
              v-for="item in options"
              :key="item[props.props.value]"
              :label="item[props.props.label]"
              :value="item[props.props.value]"
            />
          </el-select>
          <el-button size="small" type="primary" @click="submit"> 查询 </el-button>
          <el-button size="small" @click="reset"> 重置 </el-button>
        </div>
</template>

<script setup>
import { ref } from "vue"
const input = ref("")
const value = ref("")
const props = defineProps({
    options:Array,
    placeholder:String,
    selectPlaceholder:String,
    props:{
      type:Object,
      define: {
        label:{
          type:String,
          define:"label"
        },
        value:{
          type:String,
          define:"value"
        }
      }
    }
})


const emit = defineEmits(["submit","reset","checkDelete"])
const submit = () => {
    emit("submit",value.value,input.value)
}
const reset = () => {
    emit("reset",0)
    input.value = ""
}

</script>

<style lang="scss" scoped>
   .table_filter {
    v-deep .el-input__inner {
      width: 200px !important;
    }
  }
</style>